<template>
  <div class="app-container">
    <el-form ref="queryForm" size="small" label-width="100px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="时间" prop="timeGroup">
            <el-date-picker v-model="timeGroup" type="daterange" :picker-options="pickerOptions" editable
                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"
                            value-format="yyyy-MM-dd" format="yyyy-MM-dd" style="width: 100%;">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">

          <el-form-item label="部门归属" prop="deptId">
            <treeselect v-model="deptId" :options="deptOptions" :show-count="true" placeholder="请选择部门归属"
                        :default-expand-level="4"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-table v-loading="loading" :data="custinfoList" fit style="width: 100%" show-summary
              :summary-method="getSummaries">
      <el-table-column label="姓名" align="center" prop="nick_name" min-width="3%"/>
      <el-table-column label="部门归属" align="center" prop="dept_name" min-width="3%"/>
      <el-table-column label="跟进中数据" align="center" prop="amount_type5_cnt" min-width="3%">
          <template slot-scope="scope">
                   <span class="report_span1" @click="custleveldataDetails(scope.row.emp_id,1,null,null)">{{
                       scope.row.amount_type5_cnt + '/' + scope.row.amount_type5_ratio + '%'
                     }}</span>
          </template>
        </el-table-column>
        <el-table-column label="跟进中上门" align="center" prop="visitcount_5" min-width="3%">
          <template slot-scope="scope">
                    <span class="report_span2" @click="custleveldataDetails(scope.row.emp_id,1,null,1)">{{
                        scope.row.visitcount_5
                        + '/' + scope.row.visitcount5_ratio + '%'
                      }}</span>
          </template>
        </el-table-column>
        <el-table-column label="5万以内数据" align="center" prop="amount_type1_cnt" min-width="3%">
          <template slot-scope="scope">
                    <span class="report_span1" @click="custleveldataDetails(scope.row.emp_id,null,'1',null)">{{
                        scope.row.amount_type1_cnt + '/' + scope.row.amount_type1_cnt + '%'
                      }}</span>
          </template>
        </el-table-column>
        <el-table-column label="5万以内上门" align="center" prop="visitcount_1" min-width="3%">
          <template slot-scope="scope">
                    <span class="report_span2" @click="custleveldataDetails(scope.row.emp_id,null,'1',1)">{{
                        scope.row.visitcount_1
                        + '/' + scope.row.visitcount1_ratio + '%'
                      }}</span>
          </template>
        </el-table-column>
        <el-table-column label="5万-20万数据" align="center" prop="amount_type2_cnt" min-width="3%">
          <template slot-scope="scope">
                    <span class="report_span1" @click="custleveldataDetails(scope.row.emp_id,null,'2',null)">{{
                        scope.row.amount_type2_cnt + '/' + scope.row.amount_type2_ratio + '%'
                      }}</span>
          </template>
        </el-table-column>
        <el-table-column label="5万-20万上门" align="center" prop="visitcount_2" min-width="3%">
          <template slot-scope="scope">
                    <span class="report_span2" @click="custleveldataDetails(scope.row.emp_id,null,'2',1)">{{
                        scope.row.visitcount_2
                        + '/' + scope.row.visitcount2_ratio + '%'
                      }}</span>
          </template>
        </el-table-column>
        <el-table-column label="20万-50万数据" align="center" prop="amount_type3_cnt" min-width="3%">
          <template slot-scope="scope">
                    <span class="report_span1" @click="custleveldataDetails(scope.row.emp_id,null,'3',null)">{{
                        scope.row.amount_type3_cnt + '/' + scope.row.amount_type3_ratio + '%'
                      }}</span>
          </template>
        </el-table-column>
        <el-table-column label="20万-50万上门" align="center" prop="visitcount_3" min-width="3%">
          <template slot-scope="scope">
                    <span class="report_span2" @click="custleveldataDetails(scope.row.emp_id,null,'3',1)">{{
                        scope.row.visitcount_3
                        + '/' + scope.row.visitcount3_ratio + '%'
                      }}</span>
          </template>
        </el-table-column>
        <el-table-column label="50万以上数据" align="center" prop="amount_type4_cnt" min-width="3%">
          <template slot-scope="scope">
                    <span class="report_span1" @click="custleveldataDetails(scope.row.emp_id,null,'4',null)">{{
                        scope.row.amount_type4_cnt + '/' + scope.row.amount_type4_ratio + '%'
                      }}</span>
          </template>
        </el-table-column>
        <el-table-column label="50万以上上门" align="center" prop="visitcount_4" min-width="3%">
          <template slot-scope="scope">
                    <span class="report_span2" @click="custleveldataDetails(scope.row.emp_id,null,'4',1)">{{
                        scope.row.visitcount_4
                        + '/' + scope.row.visitcount4_ratio + '%'
                      }}</span>
          </template>
        </el-table-column>
        <el-table-column label="总数量" align="center" prop="amount_type_cnt_total" min-width="3%">
          <template slot-scope="scope">
                    <span class="report_span1" @click="custleveldataDetails(scope.row.emp_id,null,null,null)">{{
                        scope.row.amount_type_cnt_total
                      }}</span>
          </template>
        </el-table-column>
        <el-table-column label="总上门" align="center" prop="visitcount_total" min-width="3%">
          <template slot-scope="scope">
                    <span class="report_span2" @click="custleveldataDetails(scope.row.emp_id,null,null,1)">{{
                        scope.row.visitcount_total
                      }}</span>
          </template>
        </el-table-column>
        <el-table-column label="总上门占比" align="center" prop="visitcount_total_ratio" min-width="3%"/>
    </el-table>
    <!-- 查看客户列表 -->
    <el-dialog :title="title" :visible.sync="open" class="dialogCust" width="96%" :fullscreen="modalverbs"
               append-to-body :modalverbs="modalverbs" :destroy-on-close="modalverbs">
      <cust-info-list :form.sync="form"></cust-info-list>
    </el-dialog>
  </div>
</template>

<script>
import {custdebtlimitdataStatics} from "@/api/crmsys/report/custStatics";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import Treeselect from "@riophae/vue-treeselect";
import {childrenAlldeptTree} from "@/api/system/user";
import CustInfoList from "@/components/crmSys/custInfoList.vue";

export default {
  name: "CustdebtlimitdataStatics",
  dicts: [
    "crm_dept_level"
  ],
  components: {CustInfoList, Treeselect},
  data() {
    return {
      open: false,
      modal: false,
      title: '客户列表',
      form: {},//通过from去子组件查询列表数据
      deptId: null,
      timeGroup: null,
      modalverbs: false,
      // 遮罩层
      loading: false,
      custinfoList: [],
      // 部门归属树选项
      deptOptions: [],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {
    this.getDeptTree();
    this.goalDate = [this.getNowFormatDate(), this.getNowFormatDate()]
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {

  },
  // methods方法
  methods: {
    /** 总计 */
    getSummaries(param) {
      const {columns, data} = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总计';
          return;
        }
        if(column.property != 'nick_name' && column.property != 'dept_name' && column.property != 'visitcount_total_ratio'){
          sums[index]=this.calculateSum(data,column.property);
        }else{
          sums[index]='--';
        }
      });
      return sums;
    },
    getNowFormatDate() {
      var date = new Date();
      var seperator1 = "-";
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var currentdate = year + seperator1 + month + seperator1 + strDate;
      return currentdate;
    },
    calculateSum(data,name){
      let sum=0;
      data.forEach(value =>{
        sum=sum+value[name];
      });
      return sum;
    },
    handleQuery() {
      this.getList();
    },
    resetQuery() {

      this.deptId = null;
      this.timeGroup = null;
    },
    /** 查询部门归属下拉树结构 */
    getDeptTree() {
      var dept = {deptId: this.$store.state.user.deptid}
      childrenAlldeptTree(dept).then(response => {
        this.deptOptions = response.data;
      });
    },
    getList() {
      if (this.timeGroup == null || this.timeGroup == "") {
        //必须选择时间
        this.$message.error("请选择要查询的时间！");
        return;
      }

      this.loading = true;
      let deptid = this.deptId == null ? -1 : this.deptId;

      custdebtlimitdataStatics(this.timeGroup, deptid).then(response => {
        this.custinfoList = response.rows;
      });
      this.loading = false;
    },
    custleveldataDetails(userId, status, amountType, isVisited) {
      //查询明细数据
      let inparams = {};
      inparams.oldUserId = userId;
      inparams.status = status != null ? status.toString() : '';
      inparams.amountType = amountType != null ? amountType.toString() : '';
      inparams.deptId = this.deptId;
      inparams.params = {};
      inparams.specialParams = {};
      inparams.specialParams.oldDistributeTime = this.timeGroup;
      inparams.params.isVisited = isVisited != null ? isVisited.toString() : '';
      inparams.params.mustAmountType = 1;
      inparams.pageNum = 1;
      inparams.pageSize = 10;
      this.$set(this.$data, 'form', inparams);
      this.open = true;
    },
  }
}
</script>
<style lang="scss" scoped>
@import '@/assets/styles/command.scss';

.report_span1 {
  color: blue;
  cursor: pointer;
}

.report_span2 {
  color: rgb(231, 62, 146);
  cursor: pointer;
}
</style>
